"use client";
import React, { useState, useEffect } from "react";
import { Button, Input, Select, DatePicker,Space,Dropdown,MenuProps,message } from "antd";
import TABLE from "../../system/Content/page";
import "./page.css";
import {
  SearchOutlined,
  UndoOutlined,
  DownloadOutlined,
  ToTopOutlined,
  InsertRowAboveOutlined,
  UserAddOutlined,
  PlusOutlined,
  SignatureOutlined,
  LogoutOutlined,
  ClearOutlined,
  CheckSquareOutlined,
  BorderOutlined,
  DownOutlined,
  UserOutlined
} from "@ant-design/icons";
const columns = [
  {
    title: "备用编号",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "费用名称",
    dataIndex: "user",
    key: "user",
  
  },
  {
    title: "关联客户",
    dataIndex: "sjjd",
    key: "sjjd",
    width: "190px",
  },
  {
    title: "费用金额",
    dataIndex: "bjjl",
    key: "bjjl",
  },
  {
    title: "费用类型",
    dataIndex: "bjzje",
    key: "bjzje",
  },
  {
    title: "发生时间",
    dataIndex: "zhgj",
    key: "zhgj",
  },
  {
    title: "报销状态",
    dataIndex: "wgjts",
    key: "wgjts",
  },
  {
    title: "负责人员",
    dataIndex: "fzry",
    key: "fzry",
  },
  {
    title: "操作",
    key: "action",
    render: (_: any, content: any) => {
      return (
        <div className='co'>
         <span>
        <LogoutOutlined />
          详情
        </span>
        <span>
        <ClearOutlined />
          删除
        </span>
        </div>
      );
    },
  },
];
const handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {
  message.info('Click on left button.');
  console.log('click left button', e);
};
const handleMenuClick: MenuProps['onClick'] = (e) => {
  message.info('Click on menu item.');
  console.log('click', e);
};
const items: MenuProps['items'] = [
  {
    label: '1st menu item',
    key: '1',
    icon: <UserOutlined />,
  },
  {
    label: '2nd menu item',
    key: '2',
    icon: <UserOutlined />,
  },
  {
    label: '3rd menu item',
    key: '3',
    icon: <UserOutlined />,
  }
];

const menuProps = {
  items,
  onClick: handleMenuClick,
};
export const data = [
  {
    key: "1",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  },
  {
    key: "2",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "3",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "4",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "5",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "6",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "7",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "8",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "9",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "10",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "11",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "12",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "13",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  }, {
    key: "14",
    title: "FY20190324010001",
    user: "招待费用",
    sjjd: "深圳市亿恩科技有限公司",
    bjjl: "￥1,000.00",
    bjzje: "招待费",
    zhgj: "2019-04-01",
    wgjts: "未报销",
    fzry:"赵小刚"
  },
];

const suffix = (
  <UserAddOutlined
    style={{
      fontSize: 16,
      color: '#D4E1F7',
    }}
  />
);

export const current = {
  defaultPageSize: 5,
  pageSizeOptions: [5, 10, 15, 20],
  showSizeChanger: true,
  total: data.length,
};
function page() {
  //tab切换数据
  const [tabs, settabs] = useState([
    {
      name: "全部费用",
      id: "0",
    },
    {
      name: "我的费用",
      id: "1",
    },
    {
      name: "下属费用",
      id: "2",
    },
    {
      name: "",
      id: "1",
    },
    {
      name: "",
      id: "2",
    }
  ]);
  //切换标识
  const [tabIndex, settabIndex] = useState(0);
  //点击切换
  const tabsClick = (id: any) => {
    settabIndex(id);
  };
  //下拉选择
  const handleChange = (value: any) => {};
  //事件选择框
  const onChange = (date: any, dateString: any) => {
    console.log(date, dateString);
  };

  //复选框
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    console.log("selectedRowKeys changed: ", newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };


  return (
    <div style={{ width: "90%", margin: " 0 auto" }}>
      {/* 全部商机 */}
      <div className="all">
        <div className="all-top">
          {tabs.map((item, index) => {
            return (
              <p
                key={item.id}
                onClick={() => tabsClick(item.id)}
                className={tabIndex == index ? "active" : ""}
              >
                {item.name}
              </p>
            );
          })}
        </div>
        <div className="all-footer">
          <p>
            <Input
              placeholder="搜索关键词"
              style={{ width: "150px", height: "40px" }}
            />
          </p>
          <p>
            <Select
              defaultValue="费用类型"
              style={{ width: "150px", height: "40px" }}
              onChange={handleChange}
              options={[
                { value: "jack", label: "Jack" },
                { value: "lucy", label: "Lucy" },
                { value: "Yiminghe", label: "yiminghe" },
                { value: "disabled", label: "Disabled", disabled: true },
              ]}
            />
          </p>
          <p>
            <DatePicker
              onChange={onChange}
              style={{ width: "150px", height: "40px" }}
            />
          </p>
          <p>
          <Input placeholder="订单所属部门" suffix={suffix} style={{ width: "150px",height: "40px" }}  />
          </p>
          
          <p>
            <Select
              defaultValue="报销状态"
              style={{ width: "150px", height: "40px" }}
              onChange={handleChange}
              options={[
                { value: "jack", label: "Jack" },
                { value: "lucy", label: "Lucy" },
                { value: "Yiminghe", label: "yiminghe" },
                { value: "disabled", label: "Disabled", disabled: true },
              ]}
            />
          </p>
         
          <p>
            <Button type="primary" icon={<SearchOutlined />}>
              查询
            </Button>
          </p>
          <p>
            <Button icon={<UndoOutlined />}>重置</Button>
          </p>
        </div>
      </div>
      {/* 表格 */}
      <div className="all-table">
        {/* 添加那些按钮 */}
        <div className="all-table-top">
          <div className="all-table-top-left">
            <p>
              <Button type="primary" icon={<PlusOutlined />}>
                添加
              </Button>
            </p>
            <p>
              <Button icon={<DownloadOutlined />}>导入</Button>
            </p>
            <p>
              <Button icon={<ToTopOutlined />}>导出</Button>
            </p>
          </div>
          <div className="all-table-top-right">
            <p>
              <Button icon={<SignatureOutlined />}>排序</Button>
            </p>
            <p>
              <Button icon={<InsertRowAboveOutlined />}>列表</Button>
            </p>
          </div>
        </div>
        {/* 表格部分 */}
        <div className="all-table-footer">
          <TABLE data={data} columns={columns} current={current} rowSelection={rowSelection}></TABLE>
          <div className='di'>
            <Button icon={<CheckSquareOutlined />}>全选</Button>
            <Button icon={<BorderOutlined />}>反选</Button>
            <Space wrap className="gap-rights">
              <Dropdown menu={menuProps}>
                <Button>
                  <Space>
                    更多操作
                    <DownOutlined />
                  </Space>
                </Button>
              </Dropdown>
            </Space>
          </div>
        </div>
      </div>
    </div>
  );
}

export default page;
